  <!-- 使用方法：
            数组传递数据
              data:[
                {
                  href:"跳转页面地址",
                  bgimg:"背景图地址",
                  img:"标签图地址",
                  title:"标题内容",
                  fontcolor:"标题文字颜色变量"
                },
              ]
            例：
              <qm-entrylist-link :data="data"></qm-entrylist-link>

              data: [
                {
                  href:"/ui/center/index"
                  fontcolor: "--color-brand",
                  bgimg: "../../../../static/img/function-entrance/index4/bg/blue.png",
                  img: "static/img/function-entrance/index4/update.png",
                  title: "更新项目",
                },
              ]
   -->
<template id="qm-entrylist-link">
  <div class="items">
    <div v-for="(item, index) in data" :key="index" class="item-margin">
      <f7-link :href="item.href || '#'">
        <div class="item-bg" :style="{ backgroundImage: `url(${item.bgimg})` }">
          <div
            style="
              height: 100%;
              display: flex;
              align-items: center;
              position: absolute;
            "
          >
            <div>
              <img :src="item.img" class="item-img" alt="" />
            </div>
            <p class="item-title" :style="{ color: `var(${item.fontcolor})` }">
              {{ item.title }}
            </p>
          </div>
        </div>
      </f7-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.link {
  display: block;
}
.items {
  text-align: center;
  padding: calc(40px * var(--ratio)) calc(34px * var(--ratio));
  background-color: var(--color-fill-grey-inverse);
  // margin: calc(32px * var(--ratio));
  box-shadow: 0px calc(6px * var(--ratio)) calc(18px * var(--ratio))
    calc(2px * var(--ratio)) rgba(1, 63, 170, 0.46);
  border-radius: calc(16px * var(--ratio));
  .item-margin {
    margin: 0 auto;
    margin-bottom: calc(20px * var(--ratio));
    // height: calc(162px * var(--ratio));
    .item-bg {
      //   background-image: url("../../../../static/img/function-entrance/index4/update-bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // width: calc(612px * var(--ratio));
      // height: calc(162px * var(--ratio));
      // display: flex;
      // align-items: center;
      padding-bottom: 26.47%; //  图片高/图片宽
      position: relative;
      .item-img {
        width: calc(110px * var(--ratio));
        margin-left: calc(57px * var(--ratio));
        margin-right: calc(45px * var(--ratio));
        vertical-align: top;
      }
      .item-title {
        font-size: calc(38px * var(--ratio));
        font-weight: 500;
      }
    }
  }
  .item-margin:last-child {
    margin-bottom: 0px;
  }
}
</style>
